<template>
  <div style="padding-left: 24px;height: 20px;color: #989DAA; margin-top: 20px;">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">运行管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">失物招领管理</el-breadcrumb-item>
      <el-breadcrumb-item style="color: #535862;">物品领取记录</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
<layout-card
    :filters="goodsReceiveOptions"
    @search-change="searchChange"
    headline="信息列表"
    @search-reset="searchReset"
  >
    <template #action>
      <el-button type="primary" @click="handleExport">导出</el-button>
    </template>
    <table-common
      :columns="goodsReceiveColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="tableData"
      size="large"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleDetail(row['regId'], row['taskId'])" link type="primary"
          >查看</el-button
        >
      </template>
    </table-common>
  </layout-card>
  <edit-dialog
    :centerDialogVisible="centerDialogVisible"
    :tilte="tilte"
    :width="width"
    :default-button="false"
    @Cancel="Cancel"
    @Submit="Submit"
  >
    <template #content>
      <div>
        <div class="title-row">
          <div class="title-line"></div>
          <div class="title">流程追踪</div>
        </div>
        <div>
          <el-steps :active="active">
            <template v-for="(item, index) in processNode" :key="index">
              <el-step :title="'捡拾-'+item.nodeName" v-if="index == 0">
                <template #description>
                   <div>{{ item['nodeTime'] }}</div>
                  <!-- <div>T3航站楼值班柜台</div> -->
                  <div>{{ item['nodeUserName'] }} 登记</div>
                </template>
              </el-step>
              <el-step :title="item['nodeName']" v-else>
                  <template #description>
                    <div>{{ item['nodeTime'] }}</div>
                    <!-- <div>{{ item['nodeUserName'] }}</div> -->
                    <div>{{item['nodeUserName']}} 登记</div>
                  </template>
                </el-step>
            </template>
            <!-- <el-step title="01 捡拾" >
              <template #description>
                <div>2023-03-03 13:49</div>
                <div>T3航站楼值班柜台</div>
                <div>周林 登记</div>
              </template>
            </el-step>
            <el-step title="02 入库申请">
              <template #description>
                <div>2023-03-03 13:49</div>
                <div>T3航站楼值班柜台</div>
                <div>周林 登记</div>
              </template>
            </el-step>
            <el-step title="03 入库" />
            <el-step title="04 出库申请" />
            <el-step title="05 出库" />
            <el-step title="06 领取" /> -->
          </el-steps>
        </div>
      </div>
      <div class="goods-info">
        <div>
          <div class="title-row">
            <div class="title-line"></div>
            <div class="title">物品信息</div>
          </div>
        </div>
        <div class="info-content">
          <div class="col-1">
            <div class="attribute-row">
              <img src="" alt="物品信息" />
            </div>
          </div>
          <div class="col-2">
            <div class="attribute-row">
              <label>物品名称：</label>
              <span>{{ goodsData.goodsName }}</span>
            </div>
            <div class="attribute-row">
              <label>物品编号：</label>
              <span>{{ goodsData.goodsCode }}</span>
            </div>
            <div class="attribute-row">
              <label>保质期：</label>
              <span>{{ goodsData.timeLimit }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾人姓名：</label>
              <span>{{ goodsData.pickUpName }}</span>
            </div>
            <div class="attribute-row">
              <label>航站楼【捡拾】：</label>
              <span>{{ goodsData.pickUpTerminal }}</span>
            </div>
            <div class="attribute-row">
              <label>航站楼【存放】：</label>
              <span>{{ goodsData.depositTerminal }}</span>
            </div>
            <div class="attribute-row">
              <label>登记人:</label>
              <span>{{ goodsData.creator.name }}</span>
            </div>
          </div>
          <div class="col-3">
            <div class="attribute-row">
              <label>物品类型：</label>
              <span>{{ goodsData.goodsType }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾日期：</label>
              <span>{{ goodsData.pickUpTime }}</span>
            </div>
            <div class="attribute-row">
              <label>物品时效：</label>
              <span>{{ goodsData.goodsLimitTime }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾人电话：</label>
              <span>{{ goodsData.pickUpPhone }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾地：</label>
              <span>{{ goodsData.pickUpPlace }}</span>
            </div>
            <div class="attribute-row">
              <label>存放地：</label>
              <span>{{ goodsData.depositPlace }}</span>
            </div>
            <div class="attribute-row">
              <label>登记时间：</label>
              <span>{{ goodsData.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-info">
        <div class="title-row">
          <div class="title-line"></div>
          <div class="title">领取信息</div>
        </div>
        <div class="get-info-content">
          <div class="get-info-row-1">
            <div class="attribute-row-30">
              <label>领取人姓名：</label>
              <span>{{ receiveData.receiveName }}</span>
            </div>
            <div class="attribute-row-30">
              <label>领取人证件号：</label>
              <span>{{ receiveData.receiveNo }}</span>
            </div>
            <div class="attribute-row-30">
              <label>领取人电话：</label>
              <span>{{ receiveData.receivePhone }}</span>
            </div>
          </div>
          <div class="get-info-row-2">
            <div class="attribute-row-30">
              <label>领取时间：</label>
              <span>{{ receiveData.receiveTime }}</span>
            </div>
            <div class="attribute-row-70">
              <label>备注：</label>
              <span>{{ receiveData.remarks }}</span
              >
            </div>
          </div>
          <div class="get-info-row-3">
            <div class="attribute-row-30">
              <label>登记人:</label>
              <span>{{ receiveData.creator.name }}</span>
            </div>
            <div class="attribute-row-70">
              <label>记录时间:</label>
              <span>{{ receiveData.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button @click="Cancel">关闭</el-button>
      </span>
    </template>
  </edit-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, computed, watch } from 'vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { goodsReceiveColumns } from '@/views/lose/config/columns'
import { goodsReceiveOptions } from '@/views/lose/config/filters'
import editDialog from '@/components/editDialog/index.vue'
import { ElMessage } from 'element-plus'
import { goodsReceive, exportGoods } from '@/api/lose/goodsReceive'
import { goodsDetail } from '@/api/lose/goodsReg'
import { dataDict } from '@/api/common'

// 新增弹窗是否打开
const centerDialogVisible = ref(false)
// 弹窗标题
const tilte = ref('查看捡拾物品')
const width = ref('70%')
const visible = ref(false)
const isAdd = ref(true)
const active = ref(1)
const goodsData = ref()
const receiveData = ref()
const processNode = ref<Array<any>>([{}])

/**
 * 导出
 */
const handleExport = () => {
  centerDialogVisible.value = true
  isAdd.value = true
  visible.value = true
  if (Array.isArray(search.value.depositTerminal)) {
    search.value.depositTerminal.length === 0 ? delete search.value.depositTerminal : search.value.depositTerminal = search.value.depositTerminal.join(',')
  }
  if (Array.isArray(search.value.goodsType)) {
    search.value.goodsType.length === 0 ? delete search.value.goodsType : search.value.goodsType = search.value.goodsType.join(',')
  }
  if (Array.isArray(search.value.startTime)) {
    if (search.value.startTime.length > 0) {
      const date = search.value.startTime
      search.value.startTime = date[0]
      search.value.endTime = date[1]
    } else {
      delete search.value.startTime
    }
  }
  const params = {
    contidion: search.value
  }
  exportGoods(params).then(res => {
    const data: any = res
    const name = '物品领取记录' + '.xlsx'
    const url = window.URL.createObjectURL(data)
    const aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.href = url
    aLink.setAttribute('download', name)
    document.body.appendChild(aLink)
    aLink.click()
    document.body.removeChild(aLink) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
  }).catch(err => {
    ElMessage.error(err.message || '导出失败')
  })
}

/**
 * 查看详情
 */
const handleDetail = (regId: string, taskId: string) => {
  centerDialogVisible.value = true
  goodsData.value = {
    goodsName: 'test',
    goodsCode: '123',
    timeLimit: 1,
    pickUpName: '张三',
    pickUpTerminal: 'T3',
    depositTerminal: 'T3',
    creator: {
      name: '李四'
    },
    goodsType: '贵重物品',
    pickUpTime: '2023-02-02',
    goodsLimitTime: 3,
    pickUpPhone: 15136987512,
    pickUpPlace: 'T5',
    depositPlace: 'T5',
    createTime: '2023-01-02'
  }
  receiveData.value = {
    receiveName: '王五',
    receiveNo: '16456456',
    receivePhone: 1545845415,
    receiveTime: '2023-05-03',
    remarks: '测试',
    creator: {
      name: 'safsafd'
    },
    createTime: '2023-01-02'
  }
  active.value = 4
  processNode.value = [
    {
      nodeTime: '2023-01-02',
      nodeUserName: '张三',
      nodeName: '入库'
    },
    {
      nodeTime: '2023-01-02',
      nodeUserName: '张三',
      nodeName: '入库'
    },
    {
      nodeTime: '2023-01-02',
      nodeUserName: '张三',
      nodeName: '入库'
    },
    {
      nodeTime: '2023-01-02',
      nodeUserName: '张三',
      nodeName: '入库'
    }
  ]
  // const param = {
  //   regId: regId,
  //   taskId: taskId
  // }
  // goodsDetail(param).then(res => {
  //   console.log('detail:', res)
  //   if (res.data) {
  //     goodsData.value = res.data.goodsData
  //     receiveData.value = res.data.receiveData
  //     processNode.value = res.data.list
  //   }
  // }).catch(err => {
  //   ElMessage.error(err.message || '获取物品详情失败')
  // })
}
/**
 * 弹窗点击取消
 */
const Cancel = () => {
  centerDialogVisible.value = false
}

/**
 * 弹窗点击确认
 */
const Submit = () => {
  centerDialogVisible.value = false
}

const loading = ref(false)
const tableData = ref([])
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const search = ref<FilterDataType>({})

/**
 * 获取字典数据
 * @param dataType 字典类型
 */
const getTerminalData = () => {
  const params = {
    resourceKey: 'terminal'
  }
  let data: Array<any> = []
  dataDict(params).then(res => {
    if (res.data) {
      data = res.data.list
      const options: Array<any> = []
      data.forEach(ele => {
        options.push({ label: ele.name, value: ele.key })
      })
      goodsReceiveOptions[5].inputProps.options = options
      console.log(goodsReceiveOptions)
    }
  }).catch(err => {
    ElMessage.error(err.message || '获取字典数据失败')
  })
}

/**
 * 获取物品领取记录
 */
const getData = () => {
  loading.value = true
  if (Array.isArray(search.value.depositTerminal)) {
    search.value.depositTerminal.length === 0 ? delete search.value.depositTerminal : search.value.depositTerminal = search.value.depositTerminal.join(',')
  }
  if (Array.isArray(search.value.goodsType)) {
    search.value.goodsType.length === 0 ? delete search.value.goodsType : search.value.goodsType = search.value.goodsType.join(',')
  }
  if (Array.isArray(search.value.startTime)) {
    if (search.value.startTime.length > 0) {
      const date = search.value.startTime
      search.value.startTime = date[0]
      search.value.endTime = date[1]
    } else {
      delete search.value.startTime
    }
  }

  const params = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: search.value
  }
  goodsReceive(params).then(res => {
    if (res.data) {
      loading.value = false
      const data: Array<any> = res.data.list
      data.forEach(ele => {
        ele.userName = ele.recorder.name
      })
      // @ts-ignore
      tableData.value = data
      pager.total = res.data.total
    }
  }).catch(() => {
    loading.value = false
  })
}

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}
/**
 * 点击查询
 */
const searchChange = (data: FilterDataType) => {
  search.value = data
  getData()
}

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  getData()
}
const initData = () => {
  // 获取航站楼
  getTerminalData()
  // TODO:获取物品类型
  // 获取记录
  getData()
}

onBeforeMount(initData)
</script>
<style lang="less" scoped>
/deep/.el-breadcrumb__inner{
  color: #989DAA;
  font-size: 14px;
}
.title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  .title-line {
    height: 12px;
    background-color: blue;
    width: 2px;
    margin-top: 2px;
  }
  .title {
    color: #353a42;
    font-size: 16px;
    margin-left: 10px;
  }
}
.goods-info {
  margin-top: 20px;
  .info-content {
    margin-top: 10px;
    line-height: 35px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    .col-1,
    .col-2,
    .col-3 {
      width: 30%;
    }
    .attribute-row {
      width: 100%;
    }
    .attribute-row label {
      width: 130px;
      display: inline-block;
      color: #989daa;
      font-size: 14px;
    }
    .attribute-row span {
      color: #535862;
    }
  }
  .get-info-content {
    line-height: 40px;
    margin-top: 10px;
    .get-info-row-1,
    .get-info-row-2,
    .get-info-row-3 {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .attribute-row-30 {
      width: 30%;
    }
    .attribute-row-70 {
      width: 64.9%;
    }
    .attribute-row-30 label,
    .attribute-row-70 label {
      width: 100px;
      display: inline-block;
      color: #989daa;
      font-size: 14px;
    }
    .attribute-row-30 span,
    .attribute-row-70 span {
      color: #535862;
    }
  }
}
/deep/ .el-step {
  .el-step__head {
    margin-top: 20px;
  }
  .el-step__title{
    position: absolute;
    top: -10px;
  }
  .el-step__description {
    margin-top: 10px;
  }
  // .el-step__line {
  //   background-color: lightskyblue;
  //   width: 80%;
  //   margin-left:14.8%;
  // }
  .el-step__icon {
    background-color: blue;
    border: none;
    .el-step__icon-inner {
      visibility: hidden;
    }
  }
}
</style>
